<template>
  <div class="list-detail">
    <div class="other" v-if="!this.$route.query.isRecommend">
      <div class="top">
        <div class="img">
          <img :src="info.coverImgUrl" alt="" />
        </div>
        <div class="detail">
          <h2 class="title">{{ info.name }}</h2>
          <div class="create-user">
            <img :src="info.avatarUrl" alt="" />
            <span class="name">{{ info.user }}</span>
            <span class="time">{{ getDate(info.createTime) }}创建</span>
          </div>
          <div class="btns">
            <button @click="setIds">
              <a-icon type="caret-right" theme="filled" />播放全部
            </button>
          </div>
          <div class="other">
            歌曲: <span class="song-count">{{ info.songCount }}</span> 播放:
            <span class="play-count">{{ info.playCount }}</span>
          </div>
        </div>
      </div>
      <SongItem :result="result" :isSongList="true"></SongItem>
    </div>
    <div class="daily" v-else>
      <div class="d-top">
        <div class="t">
          <div class="img">
            <img
              src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2140697723,2949229006&fm=26&gp=0.jpg"
              alt=""
            />
          </div>
          <div class="des">
            <h3>每日歌曲推荐</h3>
            <span class="word">根据你的音乐口味生成，每天6:00更新</span>
          </div>
        </div>
        <div class="btns">
          <button @click="setIds">
            <a-icon type="caret-right" theme="filled" />播放全部
          </button>
        </div>
      </div>
      <SongItem
        :recommentLists="recommentLists"
        :isSongList="true"
        :isRecommendList="true"
      ></SongItem>
    </div>
  </div>
</template>

<script>
import SongItem from "./SongItem";
import axios from "@/utils/axios";
export default {
  name: "SongListDtail",
  data() {
    return {
      result: [],
      info: {},
      recommentLists: [],
      ids: [],
    };
  },
  components: {
    SongItem,
  },
  beforeRouteUpdate(to, from, next) {
    this.sendRequest(to.params.id);
    next();
  },
  methods: {
    setIds() {
      this.$bus.$emit("provideIds", this.ids);
    },
    getDate(time) {
      const date = new Date(time);
      const year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return `${year}-${month}-${day}`;
    },
    sendRequest(id) {
        axios.get("/playlist/detail", { params: { id } }).then((res) => {
        const playlist = res.playlist;
        const data = playlist && playlist.tracks;
        let obj = {};
        obj.name = playlist.name;
        obj.coverImgUrl = playlist.coverImgUrl;
        obj.user = playlist.creator.nickname;
        obj.avatarUrl = playlist.creator.avatarUrl;
        obj.songCount = data.length;
        obj.playCount = playlist.playCount;
        obj.createTime = playlist.createTime;
        if (data && data.length) {
          this.result = data;
          this.ids = data.map((item) => item.id);
        }
        this.info = obj;
      });
    }
  },
  created() {
    const route = this.$route;
    const id = route.params.id;
    const isRecommend = route.query.isRecommend;
    if (isRecommend) {
      axios.get("/recommend/songs").then((res) => {
        const songs = res.data.dailySongs;
        this.recommentLists = songs;
        this.ids = songs.map((item) => item.id);
      });
      return;
    }
    if (id) {
      this.sendRequest(id);
    }
  },
};
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  height: 26rem;
  padding: 3rem;
  .img {
    height: 100%;
    width: 20rem;
    img {
      height: 100%;
      width: 100%;
      border-radius: 1rem;
    }
  }
  .detail {
    margin-left: 2rem;
    .title {
      font-size: 2.4rem;
      font-weight: bold;
    }
    .create-user {
      font-size: 1.2rem;
      img {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
      }
      .name {
        color: lightblue;
        margin: 0 1rem;
      }
    }
    .btns {
      button {
        color: inherit;
        &:hover {
          color: inherit;
          border-color: inherit;
        }
      }
      margin-top: 1rem;
      color: #fff;
      button {
        font-size: 2rem;
        height: 4rem;
        width: 18rem;
        border-radius: 2rem;
        background: rgba(236, 65, 65);
        border: none;
      }
    }
    .other {
      margin-top: 2rem;
      .song-count {
        margin-right: 2rem;
      }
    }
  }
}
.daily {
  .d-top {
    height: 18rem;
    padding: 3rem;
    border-bottom: 1px solid #eee;
    .t {
      display: flex;
      .img {
        img {
          width: 8rem;
          height: 8rem;
        }
      }
      .des {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 2rem;
        h3 {
          font-size: 2.2rem;
          font-weight: bold;
          margin-bottom: 0;
        }
        .word {
          font-size: 1.3rem;
        }
      }
    }
    .btns {
      button {
        color: inherit;
        &:hover {
          color: inherit;
          border-color: inherit;
        }
      }
      margin-top: 1rem;
      color: #fff;
      button {
        font-size: 2rem;
        height: 4rem;
        width: 18rem;
        border-radius: 2rem;
        background: rgba(236, 65, 65);
        border: none;
      }
    }
  }
}
</style>